﻿
@section scripts{
    <script id="test" type="text/x-jquery-tmpl">
        <li>${Id}.<span>${Name}</span>${Url}</li>
    </script>
    <script type="text/javascript">
        var bootstrap = function ($, ibpm) {
            "use strict";
            var page = {
                init: function () {
                    //初始化
                    page.bind();
                },
                bind: function () {
                    $(document).endlessScroll({
                        bottomPixels: 450,
                        fireDelay: 10,
                        loadingImg: "/Playground/img/loading.gif",
                        callback: function (p) {
                            page.GetData(p);
                        }
                    });
                },
                GetData: function (p) {
                    ibpm.httpAsyncGet(top.$.rootUrl + '/Data/GetData?id=' + p, function (json) {
                        //alert(JSON.stringify(json.data));
                        $('#test').tmpl(json.data).appendTo('#div_template2');
                    });
                }
            };
            page.init();
        };
    </script>
}

<ul id="list">
    <li><img src="/Playground/img/grass-blades.jpg" width="580" height="360" alt="Grass Blades" /></li>
    <li><img src="/Playground/img/stones.jpg" width="580" height="360" alt="Stones" /></li>
    <li><img src="/Playground/img/sea-mist.jpg" width="580" height="360" alt="Sea Mist" /></li>
    <li><img src="/Playground/img/pier.jpg" width="580" height="360" alt="Pier" /></li>
    <li><img src="/Playground/img/lotus.jpg" width="580" height="360" alt="Lotus" /></li>
    <li><img src="/Playground/img/mojave.jpg" width="580" height="360" alt="Mojave" /></li>
    <li><img src="/Playground/img/lightning.jpg" width="580" height="360" alt="Lightning" /></li>
</ul>
<br />
<ul id="div_template2">
</ul>
<hr />
